<template>
    <div class="my-container">
      <div class="banner-box-swiper">
        <swiper
          v-if="carouselList.length > 0"
          :options="swiperOption"
          ref="mySwiper"
        >
          <swiper-slide
            class="swiper-slide"
            v-for="item in carouselList"
            :key="item.id"
          >
            <a @click="gotoCartton(item)"><img :src="item.image_url" alt="" /></a>
          </swiper-slide>
        </swiper>
      </div>
    </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
let vm = null;
export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      carouselList: [],
      active: 0,
      carouselIndex: 0,
      // 异形轮播图配置
      swiperOption: {
        effect: "coverflow",
        coverflowEffect: {
          rotate: 30, // slide做3d旋转时Y轴的旋转角度 (默认50).
          stretch: -10, // 每个slide之间的拉伸值 越大slide靠得越紧.
          depth: 200, // slide的位置深度 值越大z轴距离越远 看起来越小.
          modifier: 2, // depth和rotate和stretch的倍率 相当于(depth*modifier、rotate*modifier、stretch*modifier) 值越大这三个参数的效果越明显(默认1).
          slideShadows: true, // 开启slide阴影 (默认 true)
        },
        // 默认选中中间一张
        centeredSlides: true,
        // 无限循环
        loop: true,
        // 自动轮播
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        slideToClickedSlide: true,
        on: {
          slideChange: function () {
            vm.carouselIndex = this.realIndex;
          },
        },
        loopedSlides: 2,
      },
    };
  },
  created() {
    vm = this;
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  mounted() {
    this.getCarouselList();
  },
  methods: {
    // 轮播图
    getCarouselList() {
      this.axios({
          url:'GetClassPageHomeBanner',
          params:{
              id:1010
          }
      }).then((res)=>{
          this.carouselList = res.data.data.banner;
      })
    },
    gotoCartton(item){
      
      let id1 = item.jump_url.split("/");
      let id = id1[id1.length-1]
      this.$router.push({name:"CartoonContainer",query:{id}})
    }
  },
};
</script>
<style lang="less" scoped>
.my-container {
  width: 100%;
  padding-top: 12px;
  box-sizing: border-box;
  .banner-box-swiper {
    width: 100%;
    overflow: hidden;
    .swiper-container {
      height: 280px;
      width: 190px;
      overflow: visible;
      .swiper-slide {
        text-align: center;
        background: #fff;
        transition: 300ms;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        a {
          width: 100%;
          display: block;
          box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.21);
          border-radius: 10px;
          overflow: hidden;
          img {
            width: 100%;
            display: block;
          }
        }
      }
    }
  }
}
</style>